<template>
  <div v-loading="tableLoading">
    <!-- 筛选项 -->
    <el-row :gutter="20" class="gl_searchBox">
      <el-col :span="6" :lg="4">
        <p>审核状态</p>
        <el-select v-model="api_GET_TrainTrainningQO.ApproveStatusCode" size="mini" placeholder="请选择审核状态" filterable @change="getPageList()">
          <el-option v-for="item in dictAll.trainningApproveStatus" :key="item.code" :value="item.code" :label="item.value" />
        </el-select>
      </el-col>
      <el-col :span="6" :lg="4">
        <p>培训类型</p>
        <el-select v-model="api_GET_TrainTrainningQO.TrainningTypeId" size="mini" placeholder="请选择培训类型" filterable @change="getPageList()">
          <el-option value="" label="全部" />
          <el-option v-for="item in trainningType" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
      </el-col>
      <el-col :span="12" :lg="8">
        <p>报名时间</p>
        <el-date-picker
          v-model="filterTrainDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 100%;"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          size="mini"
          @change="handleTrainTimeChange"
        />
      </el-col>
      <el-col :span="6" :lg="4">
        <p>名称</p>
        <el-input v-model="api_GET_TrainTrainningQO.Filter" placeholder="请输入名称" size="mini" clearable @change="getPageList()" />
      </el-col>
      <el-col :span="6" :lg="4" align="right" class="search_btn">
        <!-- 查询按钮 -->
        <el-button type="primary" size="mini" @click="getPageList()">{{ $t('button.query') }}</el-button>
        <!-- 重置按钮 -->
        <el-button type="warning" size="mini" @click="initForm()">{{ $t('button.Reset') }}</el-button>
      </el-col>
    </el-row>
    <!-- 操作按钮 -->
    <el-row :gutter="20" class="gl_my_15">
      <el-col :span="24">
        <el-button type="primary" size="mini" @click="openAddTrain()">新增培训</el-button>
      </el-col>
    </el-row>
    <!-- 培训视图 -->
    <el-row v-if="tableData.length" :gutter="15" class="game_view_list">
      <el-col v-for="(item, index) in tableData" :key="index" :span="8" :lg="{span: '4-8'}" class="gl_mb_15">
        <div class="game_view_item">
          <div v-if="item.isTop" class="game_top" style="color: #696b6c;">
            <i class="el-icon-upload2" />
            已置顶
          </div>
          <div class="game_title">
            <img class="game_coverimg" :src="getStaticPhotoUrl(item.logoUrl)" alt="" @error="errorPhoto">
            <div class="game_status">
              <!-- 审核状态 -->
              <el-tag v-if="item.approveStatusCode === 'NotApproved'" effect="plain" type="success" class="gl_mr_30">{{ item.trainningApproveStatus && item.trainningApproveStatus.name }}</el-tag>
              <el-tag v-else-if="item.approveStatusCode === 'ApproveSuccess'" effect="plain" class="gl_mr_30">{{ item.trainningApproveStatus && item.trainningApproveStatus.name }}</el-tag>
              <el-tag v-else effect="plain" class="gl_mr_30">{{ item.trainningApproveStatus && item.trainningApproveStatus.name }}</el-tag>
              <!-- 培训状态 -->
              <el-tag v-if="item.statusCode === 'Entry'" effect="dark" type="success">{{ item.trainningStatus && item.trainningStatus.name }}</el-tag>
              <el-tag v-else-if="item.statusCode === 'Running'" effect="dark">{{ item.trainningStatus && item.trainningStatus.name }}</el-tag>
              <el-tag v-else effect="dark">{{ item.trainningStatus && item.trainningStatus.name }}</el-tag>
              <!-- 发布状态 -->
              <!-- <span :class="item.isPublished ? 'gl_bg_info' : 'gl_bg_grey'" class="game_status_item">
                <i :class="item.isPublished ? 'el-icon-success' : 'el-icon-error'" />
                <span class="gl_pl_5">{{ item.isPublished && '已发布' || '未发布' }}</span>
              </span> -->
              <!-- 收费状态 -->
              <!-- <el-tag v-if="item.setting!==null && item.setting.publishingIsFree===false" effect="dark" type="success">{{ '免费' }}</el-tag>
              <el-tag v-if="item.setting!==null && item.setting.publishingIsFree===true" effect="dark">{{'收费' }}</el-tag> -->
            </div>
          </div>
          <div class="game_content">
            <div class="game_view_name gl_ellipsis">{{ item.name }}<i v-if="item.isDisabled" type="text" class="el-icon-remove" /></div>
            <div class="game_view_type gl_mt_10">
              培训类型：{{ item.trainningType && item.trainningType.name }}
            </div>
            <div class="game_view_seq gl_mt_10">
              报名时间：{{ item.entryStartTime && item.entryStartTime.substring(0, 10) }} 到 {{ item.entryEndTime && item.entryEndTime.substring(0, 10) }}
            </div>
            <div class="game_view_seq gl_mt_10">
              培训时间：{{ item.startTime && item.startTime.substring(0, 10) }} 到 {{ item.endTime && item.endTime.substring(0, 10) }}
            </div>
          </div>
          <div class="hover_show_message">
            <div class="game_title">
              <div class="game_view_name gl_ellipsis">{{ item.name }}<i v-if="item.isDisabled" type="text" class="el-icon-remove" /></div>
              <div class="game_view_seq gl_mt_10">
                <span class="label gl_mr_5">培训类型 </span>
                <span> {{ item.trainningType && item.trainningType.name }}</span>
              </div>
              <div class="game_view_play gl_mt_5">
                <span class="label">报名时间：</span>
                <span>{{ item.entryStartTime && item.entryStartTime.substring(0, 10) }} 到 {{ item.entryEndTime && item.entryEndTime.substring(0, 10) }}</span>
              </div>
              <div class="game_view_play gl_mt_5">
                <span class="label">培训时间：</span>
                <span>{{ item.startTime && item.startTime.substring(0, 10) }} 到 {{ item.endTime && item.endTime.substring(0, 10) }}</span>
              </div>
              <div class="game_view_play gl_mt_5">
                <span class="label">发布方：</span>
                <span>{{ item.organizationUnitDisplayName }}</span>
              </div>
            </div>
            <div class="game_content">
              <el-row class="game_status">
                <el-col :span="12" :offset="2" class="tag_text_box">
                  <!-- 审核状态 -->
                  <span v-if="item.approveStatusCode === 'NotApproved'" class="tag_text gl_mr_10 gl_color_success">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />{{ item.trainningApproveStatus && item.trainningApproveStatus.name }}</span>
                  <span v-else-if="item.approveStatusCode === 'ApproveSuccess'" class="tag_text gl_mr_10 gl_color_info">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />{{ item.trainningApproveStatus && item.trainningApproveStatus.name }}</span>
                  <span v-else class="tag_text gl_mr_10">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />{{ item.trainningApproveStatus && item.trainningApproveStatus.name }}</span>
                  <!-- 查看按钮 -->
                  <img class="icon_chakan" :src="imgSrc" alt="" @click="openApproveProgress(item)">
                </el-col>
                <el-col :span="10" class="tag_text_box">
                  <!-- 培训状态 -->
                  <span v-if="item.statusCode === 'Entry'" class="tag_text gl_color_info">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />{{ item.trainningStatus && item.trainningStatus.name }}</span>
                  <span v-else-if="item.statusCode === 'Running'" class="tag_text gl_color_success">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />{{ item.trainningStatus && item.trainningStatus.name }}</span>
                  <span v-else class="tag_text">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />{{ item.trainningStatus && item.trainningStatus.name }}</span>
                </el-col>
              </el-row>
              <div style="text-align:center;display:flex;justify-content: space-between" class="gl_mt_10">
                <div class="publish_btn" :disabled="item.isPublished" @click="publishTrain(item)">发布</div>
                <div v-if="user==='WXCenter'" class="ban_btn">
                  <div v-if="item.isDisabled" class="ban_btn_colgreen" :disabled="item.isPublished" @click="enable(item)">解禁</div>
                  <div v-else class="ban_btn_colred" :disabled="item.isPublished" @click="ban(item)">禁用</div>

                </div>
                <!-- <el-button style="width:60%;padding: 10px 18px;" type="primary" size="mini" @click="publishTrain(item)">发布</el-button> -->
              </div>
              <el-row :gutter="20" class="gl_mt_10 gl_btn_bg_F">
                <el-col v-for="jtem in gameBtnList" :key="jtem.code" :span="7" class="gl_my_5">
                  <el-button type="primary" plain size="small" @click="handleCommand(jtem.code, item)">{{ jtem.name }}</el-button>
                </el-col>
              </el-row>
            </div>
            <div v-if="!item.isTop" class="game_top gl_color_primary" @click="setTrainTop(item)">
              <i class="el-icon-upload2" />
              置顶
            </div>
            <div v-else class="game_top gl_color_warning" @click="deleteTrainTop(item)">
              <i class="el-icon-close" />
              取消置顶
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row v-else>
      <el-col :span="24" class="gl_noData_mockTable" style="line-height: 300px">
        <p>暂无数据</p>
      </el-col>
    </el-row>
    <el-row style="text-align: center;" class="gl_pb_15">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="api_GET_TrainTrainningQO.MaxResultCount"
        :current-page="api_GET_TrainTrainningQO.Page"
        @size-change="changePageSize"
        @current-change="changePage"
      />
    </el-row>
    <approve-progress ref="approveProgress" />
    <ban ref="ban" />
    <form id="form" ref="form" action="https://unipay.ydfuture.com/api/v1/trade/cashDesk" method="post" style="display:none">
      <input ref="pay_params" type="text" name="pay_params" value="">
      <button type="submit">提交</button>
    </form>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import { api_PUT_ClubTAManagementDisableTrainning } from '@/extend/api/hallswaggerApi/app.js';
import { DisableTrainningInput } from '@/lib/form/hall/swaggerForm';
import ban from '../ban/index';
import defaultGameLogo from '@/assets/images/game/game_logoDefaultPhoto.png';
import { Api_GET_TrainTrainningQO } from '@/lib/form/train/swaggerForm';
import {
  api_GET_TrainTrainning,
  api_DELETE_TrainTrainningId,
  api_PUT_TrainTrainningIdTop,
  api_POST_TrainTrainningIdPublished,
  api_GET_TrainTrainningType
} from '@/extend/api/trainswaggerApi/app';
import auth from '@/lib/directives/auth';
import approveProgress from './approveProgress';
import {
  api_GET_TradePayOrderParameter // 获取支付订单的参数
} from '@/extend/api/swaggerApi/app';
import {
  Api_GET_TradePayOrderParameterQO
} from '@/lib/form/swaggerForm';
export default {
  components: {
    approveProgress,
    ban
  },
  directives: {
    auth
  },
  data() {
    return {
      orderParameterQO: new Api_GET_TradePayOrderParameterQO(),
      DisableTrainningInput: new DisableTrainningInput(),
      defaultGameLogo: defaultGameLogo,
      filterTrainDate: [],
      api_GET_TrainTrainningQO: new Api_GET_TrainTrainningQO(),
      tableData: [],
      total: 0,
      tableLoading: false,
      trainningType: [],
      imgSrc: require('@/assets/images/check.png'),
      gameBtnList: [
        {
          code: 'edit',
          name: '培训编辑',
          isShow: true
        },
        {
          code: 'event',
          name: '科目创建',
          isShow: true
        },
        {
          code: 'expenses',
          name: '费用设置',
          isShow: !!this.gameId
        },
        {
          code: 'official',
          name: '培训官网',
          isShow: true
        },
        {
          code: 'data',
          name: '数据管理',
          isShow: true
        },
        {
          code: 'result',
          name: '培训成绩',
          isShow: true
        }
      ],
      // 勾选项
      selectionList: []
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      dictAll: state => state.dict.dictAll,
      tenantId: state => state.user.tenantId,
      currentUserType: state => state.user.currentUserType,
      user: state => state.user.info.currentOrganizationUnit.typeCode
    })
  },
  created() {
    this.getDict();
    this.initForm();
    console.log(this.user);
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 初始化
    initForm() {
      this.api_GET_TrainTrainningQO = new Api_GET_TrainTrainningQO();
      this.api_GET_TrainTrainningQO.ApproveStatusCode = '';
      this.filterTrainDate = [];
      this.getTrainTrainningType();
      this.getPageList();
    },
    getTrainTrainningType() {
      api_GET_TrainTrainningType(this.Api_GET_TrainTrainningTypeQO).then(res => {
        this.trainningType = res.items || [];
      }, () => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
        this.timeLoading = false;
      });
    },
    // 获取培训列表
    getPageList(page) {
      this.api_GET_TrainTrainningQO.IsPublished = null;
      this.api_GET_TrainTrainningQO.IncludeTrainningType = true;
      this.api_GET_TrainTrainningQO.IncludeTrainningStatus = true;
      this.api_GET_TrainTrainningQO.IncludeTrainningApproveStatus = true;
      this.api_GET_TrainTrainningQO.canEdit = true;

      this.api_GET_TrainTrainningQO.Page = page || 1;
      this.api_GET_TrainTrainningQO.SkipCount = (this.api_GET_TrainTrainningQO.Page - 1) * this.api_GET_TrainTrainningQO.MaxResultCount;
      this.tableLoading = true;
      api_GET_TrainTrainning(this.api_GET_TrainTrainningQO).then(res => {
        this.tableLoading = false;
        this.tableData = res.items || [];
        this.total = res.totalCount;
      }, () => {
        this.tableLoading = false;
        this.$message({ type: 'error', message: '获取培训列表失败！' });
      });
    },
    // 处理时间筛选项
    handleTrainTimeChange(time) {
      this.api_GET_TrainTrainningQO.EntryStartTime = time && time[0];
      this.api_GET_TrainTrainningQO.EntryEndTime = time && time[1];
      this.getPageList();
    },
    // 点击更多
    handleCommand(code, gameInfo) {
      let name = '';
      switch (code) {
        // 培训编辑
        case 'edit':
          name = 'TrainEdit';
          break;
        // 科目创建
        case 'event':
          name = 'TrainSubject';
          break;
        // 费用设置
        case 'expenses':
          name = 'TrainExpenses';
          break;
        // 数据管理
        case 'data':
          name = 'TrainData';
          break;
        // 培训官网
        case 'official':
          if (gameInfo.isDisabled) {
            this.$message({ type: 'warning', message: '当前培训考试计划已被禁用，请联系平台管理员。' });
            return;
          }
          var a = document.createElement('a');
          var event = new MouseEvent('click');
          a.href = `${location.origin}/train.html#/home/${gameInfo.route + (this.tenantId ? '_' + this.tenantId : '')}/info`;
          a.target = '_blank';
          a.dispatchEvent(event);
          break;
        // 后勤管理
        case 'logistics':
          name = 'LogisticsHotel';
          break;
        // 培训成绩
        case 'result':
          name = 'TrainResult';
          break;
        default:
          break;
      }
      if (!name) return;
      this.$router.push({
        name: name,
        params: { ...gameInfo, tenantId: 't__' + (gameInfo.tenantId || '') },
        query: {
          gameName: gameInfo.name || ''
        }
      });
    },
    // 新增培训
    openAddTrain() {
      this.$router.push({
        name: 'TrainAdd'
      });
    },
    // 禁用
    ban(row) {
      this.$refs.ban.DisableTrainningInput.isDisabled = true;
      this.$refs.ban.DisableTrainningInput.trainningId = row.id;
      this.$refs.ban.dialogVisible = true;
    },
    // 删除培训
    deleteTrain(gameInfo) {
      this.$confirm(`您确定要删除该培训吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true;
        api_DELETE_TrainTrainningId(gameInfo.id).then(() => {
          this.getPageList(this.api_GET_TrainTrainningQO.Page);
          this.$message({ type: 'success', message: '删除成功！' });
        }, error => {
          this.tableLoading = false;
          this.$message({ type: 'error', message: '删除失败！' + (error.error && error.error.message || '') });
        });
      }).catch(() => {});
    },
    // 点击审核
    openApprove(row) {
      this.approveVO = new SiSTKWEventsManagementUpdateCompetitionApproveStatusInput();
      this.gameId = row.id;
      this.approveVO.approveStatusCode = row && row.approveStatusCode || 'ApproveSuccess';
      this.approveDialogVisible = true;
    },
    // 设置培训置顶
    setTrainTop(gameInfo) {
      this.$confirm(`您确定要置顶该培训吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true;
        api_PUT_TrainTrainningIdTop(gameInfo.id, { isTop: true }).then(() => {
          this.getPageList(this.api_GET_TrainTrainningQO.Page);
          this.$message({ type: 'success', message: '置顶成功！' });
        }, error => {
          this.tableLoading = false;
          this.$message({ type: 'error', message: '置顶失败！' + (error.error && error.error.message || '') });
        });
      }).catch(() => {});
    },
    // 取消培训置顶
    deleteTrainTop(gameInfo) {
      this.$confirm(`您确定要取消置顶该培训吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true;
        api_PUT_TrainTrainningIdTop(gameInfo.id, { isTop: false }).then(() => {
          this.getPageList(this.api_GET_TrainTrainningQO.Page);
          this.$message({ type: 'success', message: '取消置顶成功！' });
        }, error => {
          this.tableLoading = false;
          this.$message({ type: 'error', message: '取消置顶失败！' + (error.error && error.error.message || '') });
        });
      }).catch(() => {});
    },
    // 发布培训
    publishTrain(row) {
      this.$confirm(`您确定要发布该培训吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true;
        api_POST_TrainTrainningIdPublished(row.id).then((res) => {
          if (res.isPublished) {
            this.getPageList(this.api_GET_TrainTrainningQO.Page);
            this.$message({ type: 'success', message: '操作成功！' });
          } else {
            this.payment(res.orderNo);
          }
        }, error => {
          this.tableLoading = false;
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        });
      }).catch(() => {});
    },
    // 去支付
    payment(orderNo) {
      if (orderNo) {
        const _origin = window.location.origin;
        const _pathname = window.location.pathname;
        const _orderUrl = `#/t__${this.tenantId || ''}/order/orderSearch`;
        const url = _origin + _pathname + _orderUrl;
        this.orderParameterQO.OrderNo = orderNo;
        this.orderParameterQO.ReturnUrl = url; // 支付成功后跳转的地址
        api_GET_TradePayOrderParameter(this.orderParameterQO)
          .then(res => {
            this.$refs.pay_params.value = res.parameter.replace(/\s*/g, '');
            this.$refs.form.submit();
          });
      }
    },
    // 查看审核进度
    openApproveProgress(row) {
      this.$refs.approveProgress.open(row);
    },
    // 获取图片地址
    getStaticPhotoUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultGameLogo;
    },
    changePage(page) {
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.api_GET_TrainTrainningQO.MaxResultCount = pagesize;
      this.getPageList();
    },
    // 启用
    enable(row) {
      this.tableLoading = true;
      this.DisableTrainningInput.isDisabled = false;
      this.DisableTrainningInput.trainningId = row.id;
      api_PUT_ClubTAManagementDisableTrainning(this.DisableTrainningInput).then(res => {
        this.tableLoading = false;
        this.$message({
          type: 'success',
          message: '解禁成功'
        });
        this.getPageList();
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    }
  }
};
</script>
<style scoped>
.change_game_icon {
  height: 28px;
  line-height: 32px;
}
.change_game_icon .icon_change {
  font-size: 18px;
  width: 24px;
  height: 24px;
  visibility: visible;
  color: #696b6c;
  cursor: pointer;
}
.change_game_icon .icon_change:hover {
  color: #1890ff;
}
.game_table_list .game_coverimg {
  max-width: 74px;
  max-height: 74px;
  border-radius: 50%;
  vertical-align: middle;
}
.dropdown_item {
  margin: 0 -20px;
  padding: 0 20px;
}
.game_view_list{
  padding: 0 2px;
}
.game_view_item {
  position: relative;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.10);
  overflow: hidden;
}
.game_view_item .game_top {
  position: absolute;
  width: 80px;
  height: 16px;
  top: 11px;
  right: 9px;
  text-align: right;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
}
.game_view_item .game_title {
  width: 100%;
  text-align: center;
  padding: 32px 0 0px;
  height: 210px;
  box-sizing: border-box;
}
.game_view_item .game_status_item {
  padding: 3px 8px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.game_view_item .game_coverimg {
  max-width: 90px;
  max-height: 9 15px0px;
  border-radius: 50%;
  margin: 0px 0 40px;
}
.game_view_item .game_content {
  width: 100%;
  height: 100%;
  padding: 12px 16px;
  font-size: 14px;
  color: #828282;
  background: #e8f4ff;
}
.game_view_item .game_view_name {
  font-size: 16px;
  color: #000;
}
.game_view_item .hover_show_message {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.hover_show_message .game_top {
  position: absolute;
  width: 80px;
  height: 16px;
  top: 11px;
  right: 9px;
  text-align: right;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.game_view_item:hover .hover_show_message {
  top: 0;
}
.hover_show_message .game_title {
    background: rgba(0,0,0,0.58);
    opacity: 0.9;
    font-size: 14px;
    height: 140px;
    color: #fff;
    padding: 18px 0 0px;
}
.hover_show_message .game_view_name {
  color: #fff;
}
.hover_show_message .game_content {
  background: #f5f5f5;
}
.hover_show_message .game_content .game_status {
  text-align: center;
  margin-top: 5px;
}
.hover_show_message .game_content .game_status .tag_text_box {
  vertical-align: middle;
  line-height: 28px;
}
.hover_show_message .game_content .game_status .tag_text_box .tag_text {
  /* vertical-align: middle; */
  position: relative;
}
/* .hover_show_message .game_content .game_status .tag_text_box .tag_text::after {
  content: '';
  position: absolute;
  border: 3px solid;
  border-radius: 5px;
  left: -12px;
  top: 5px;
} */

.hover_show_message .game_content .game_status .icon_chakan{
    vertical-align: middle;
    cursor: pointer;
    width: 20px;
}
.game_view_play{
  width: 251px;
  margin: 8px auto 0;
  text-align: left;
}
.game_view_play span{
  display: inline-block;
}
.game_view_play .label{
  width: 70px;
  text-align: right;
}
.el-col-lg-4-8 {
  width: 20%;
}
.publish_btn{
  color: #FFFFFF;
  background-color: #1890ff;
  border-color: #1890ff;
  width: 60%;
  padding: 10px 18px;
  font-size: 12px;
  border-radius: 3px;
  cursor: pointer;
  margin: auto;
}
.publish_btn:hover{
  background: #46a6ff;
  border-color: #46a6ff;
  color: #FFFFFF;
}
.publish_btn:active{
  outline: none;
}
.ban_btn{
  color: #FFFFFF;
  width: 70%;
  font-size: 12px;
  border-radius: 3px;
  border-radius: 3px;
  cursor: pointer;
  margin: auto;
}
.ban_btn_colgreen {
  padding: 10px 18px;
      background-color:  #67C23A;
      border-radius: 3px;
  border-color:  #67C23A;
}
.ban_btn_colgreen:hover{
  background: #8dce6d;
  border-color: #8dce6d;
  border-radius: 3px;
  color: #FFFFFF;
}
.ban_btn_colred {
  padding: 10px 18px;
  border-radius: 3px;
    background-color:  #ff4949;
  border-color:  #ff4949;
}
.ban_btn_colred:hover{
  border-radius: 3px;
  background: #f86565;
  border-color: #f86565;
  color: #FFFFFF;
}
.ban_btn:active{
  outline: none;
}
</style>
